<template>
    <div>
        <p>
            <span class="cinemaname">{{cinemaname}} </span><span class="red">{{price}}</span><span class="small">元起</span> 
        </p>
        <p>
            <span class="add">{{add}}</span><span  class="distance">{{distance}}</span>
        </p>
        <p>开卡特惠，首单1张最高立减2元</p>
    </div>
</template>

<script>
export default {
    props:["cinemaname","price","add","distance"]

}
</script>

<style scoped>
div{
    position: relative;
}
    .cinemaname{
        font-weight: bold;
        font-size: 18px;
    }
    .red{
        color: red;
        font-size: 18px;
    }
    .small{
        color: red;
        font-size: 12px;
    }
    .add{
        font-size: 14px;
    }
    p{
        margin: 5px;
    }
    .distance{
        position: absolute;
        right: 10px;
        top: 30px;
        font-size: 14px;
    }
</style>